<template>
    <li>
        <div class="u-cover u-cover-alb2">
            <img :src="coverImgUrl" :alt="ablumName">
            <a :href="coverRoute" class="msk" :title="ablumName"></a>
            <a href="javascript:;" class="icon-play f-fr" title="播放" :data-res-id="coverId"></a>
            <p class="dec">
                <a class="tit f-thide s-fc0" :href="coverRoute" :title="ablumName" :data-res-id="coverId">{{ ablumName
                }}</a>
            </p>
            <p class="f-thide">
                <span class="nm f-thide" title="ablum-artist">
                    <a class="s-fc3" :href="ablumAuthorRoute">{{ ablumAuthor }}</a>
                </span>
            </p>
        </div>
    </li>
</template>
<script setup>
defineProps({
    "coverImgUrl": String,
    "coverRoute": String,
    "coverId": String,
    "ablumName": String,
    "ablumAuthor": String,
    "ablumAuthorRoute": String
})
</script>
<style lang="scss" scoped>
li {
    width: 153px;
    height: 178px;
    float: left;
    display: inline-block;
    padding: 0 0 30px 50px;
    padding-left: 33px;
    line-height: 1.4;
}

.u-cover {
    position: relative;
    display: block;

    .msk {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .icon-play {
        position: absolute;
        right: 10px;
        bottom: 5px;
        width: 16px;
        height: 17px;
        background-position: 0 0;
        display: inline-block;
    }

    img {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.u-cover-alb2 {
    width: 130px;
    height: 130px;

    .msk {

        width: 153px;
        height: 130px;
        background-position: 0 -845px;
    }

    &:hover {
        .icon-play {
            display: block;

        }
    }

    .icon-play {
        display: none;
        left: 94px;
        width: 28px;
        height: 28px;
        background-position: 0 -140px;

        &:hover {
            background-position: 0 -170px;
        }


    }
}

.dec {
    margin: 8px 0 3px;
    font-size: 14px;
}

p {
    width: 100%;
}

.tit {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}
</style>